<template>
  <el-card shadow="never">
    <el-row :gutter="10">
      <el-form ref="form" label-position="top" label-width="120px">
        <el-form-item label="人脸识别模型：">
          <el-select v-model="selectedFaceRecognitionModelLabel" placeholder="请选择模型">
            <el-option v-for="item in faceRecognitionModels" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="开启活体检测:">
          <el-switch v-model="turnOnAntiSpoofing" />
        </el-form-item>
        <el-form-item label="活体检测模型：">
          <el-select v-model="selectedAntiSpoofingModelLabel" placeholder="请选择模型">
            <el-option label="模型一" value="shanghai" />
            <el-option label="模型二" value="beijing" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-row>
  </el-card>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Setting',
  computed: {
    ...mapState({
      faceRecognitionModels: state => state.setting.faceRecognitionModels,
      antiSpoofingModels: state => state.setting.antiSpoofingModels
    }),
    selectedFaceRecognitionModelLabel: {
      get() {
        return this.$store.state.setting.selectedFaceRecognitionModelLabel
      },
      set(value) {
        this.$store.dispatch('setting/changeSelectedFaceRecognitionModel', value)
      }
    },
    turnOnAntiSpoofing: {
      get() {
        return this.$store.state.setting.turnOnAntiSpoofing
      },
      set(value) {
        this.$store.dispatch('setting/toggleTurnOnAntiSpoofing', value)
      }
    },
    selectedAntiSpoofingModelLabel: {
      get() {
        return this.$store.state.setting.selectedAntiSpoofingModelLabel
      },
      set(val) {
        this.$store.dispatch('setting/getSelectedAntiSpoofingModel')
      }
    }
  },
  created() {
    this.$store.dispatch('setting/getAllFaceRecognitionModels')
    this.$store.dispatch('setting/getSelectedFaceRecognitionModel')
    this.$store.dispatch('setting/getTurnOnAntiSpoofing')
  },
  mounted() {},
  methods: {}
}
</script>
